<template>
  <div class="init-container">
    <div class="mask-container" v-if="isMask"></div>
    <div class="video-container">
      <video ref="videoPlayer" autoplay playsinline></video>
      <div class="btn-container">
        <Button type="primary" @click="startCamera">{{
          $srv.getI18nByValue('打开摄像头')
        }}</Button>
        <Button type="primary" @click="stopCamera">{{
          $srv.getI18nByValue('关闭摄像头')
        }}</Button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { I_cmd, T_cmd, T_srv, Tsrv, ifs, vue } from './config';

@T_srv.comp
export default class oVideo extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private name: string = 'oVideo';

  private funName: string = 'oVideo';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  /* 遮罩 */
  public isMask: boolean = false;

  private stream: MediaStream = null;

  private isCameraActive: boolean = false;

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
    this.init();
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
  }

  beforeDestroy() {
    if (this.stream) {
      this.stopCamera(); // 确保组件销毁时停止摄像头
    }
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName,'funName'); */

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }

  async startCamera() {
    try {
      // 请求访问用户的媒体设备（摄像头）
      this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
      // 将媒体流设置为 <video> 元素的 srcObject
      const ref: any = this.$refs.videoPlayer;
      ref.srcObject = this.stream;
      this.isCameraActive = true;
    } catch (err) {
      console.error('Error accessing media devices.', err);
    }
  }

  stopCamera() {
    // 停止所有与流关联的轨道
    const tracks = this.stream.getTracks();
    tracks.forEach(track => track.stop());
    const ref: any = this.$refs.videoPlayer;
    ref.srcObject = null;
    this.isCameraActive = false;
    Tsrv.getI18nByValue;
  }

  private init() {
    this.funName = 'oVideo'; // 当前配置中的功能名
  }

  /* 设置组件整体遮罩 */
  public setMask(p: boolean) {
    this.isMask = p;
  }

  public getMask(p: boolean): boolean {
    return this.isMask;
  }
}
</script>
<style lang="scss" scoped>
.video-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .button-container {
  }
}

.mask-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
